<template>
    <div class="wrapper">
        <div class="top">管理系统</div>

        <div class="main">
            <div class="logo">
                <img src="../assets/login.png" alt="" width="100%">
            </div>
            <div class="login">
                <div class="title">欢迎登录</div>
                <el-form ref="userForm" :model="user" size="normal" :rules="rules">
                    <el-form-item prop="username">
                        <el-input v-model="user.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="user.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <div style="display: flex;">
                            <el-input v-model="code" placeholder="请输入验证码"></el-input>
                            <span @click="refreshCode()" style="cursor: pointer;">
                                <Identify :identifyCode="identifyCode"></Identify>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button type="warning" @click="$router.push('/register')">前往注册</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 10px 0; text-align: right;">
                        <el-button type="text" @click="dialogFormVisible = true">找回密码</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <el-dialog title="找回密码" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="pass" label-width="100px">
                <el-form-item label="用户名">
                    <el-input v-model="pass.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="pass.phone" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible = false">重置密码</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Identify from '@/components/Identify'

export default {
    data() {
        return {
            user: {},
            pass: {},
            dialogFormVisible: false,
            code: '',
            identifyCode: '1234',
            identifyCodes: '23456789ABCDEFGHJKLMNPQRSTUVW',
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    components: {
        Identify
    },
    mounted() {
        this.refreshCode()
    },
    methods: {
        // 生成随机验证码
        refreshCode() {
            this.identifyCode = ''
            for (let i = 0; i < 4; i++) {
                this.identifyCode += this.identifyCodes[Math.floor(Math.random() * this.identifyCodes.length)]
            }
        },
        // 登录
        login(){
            // 判断验证码是否正确
            if(this.code.toLowerCase() !== this.identifyCode.toLowerCase()){
                return this.$message.error('验证码错误')
            }
            // 判断表单校验是否合法
            this.$refs.userForm.validate(valid => {
                if(!valid) return 

                // 发送请求
                console.log('后台发送请求')
            })


        }
    }
}
</script>

<style lang="less" scoped>
.wrapper {
    height: 100vh;
    background: linear-gradient(to bottom right, #4169E1, #B7CEFA);
    overflow: hidden;

    .top {
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        padding-left: 50px;
        color: white;
        background: rgba(0, 0, 0, 0.2);
    }

    .main {
        display: flex;
        width: 50%;
        margin: 150px auto;
        background: white;
        border-radius: 10px;
        overflow: hidden;

        .logo {
            width: 40%;
        }

        .login {
            width: 350px;
            margin-top: 30px;
            margin-left: 50px;

            .title {
                margin: 20px 0;
                text-align: center;
                font-size: 24px;
                font-weight: bold;
                letter-spacing: 6px;
            }
        }

    }
}
</style>